<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>可拖拽侧边栏</title>
  <style type="text/css">
    .box {
      position: relative;
    }

    .area-left-drag {
      position: absolute;
      width: 10px;
      height: 100%;
      right: -5px;
      top: 0;
      user-select: none;
      cursor: ew-resize;
    }

    .area-left-drag .icon {
      position: absolute;
      right: -4px;
      top: 49%;
      width: 9px !important;
      height: 36px !important;
    }
  </style>
</head>

<body>
  <div :style="{ width: `${leftTreeWidth + moveX}px` }" class="box">
    <div class="area-left-drag" @mousedown="startMove">
      <SvgIcon class="area-left-drag-icon" name="Drag" @mousedown="startMove" />
    </div>
  </div>
  <script type="text/javascript">
    // 拖拉拽盒子
    const leftTreeWidth = ref(280);
    const moveX = ref(0);

    function startMove(e) {
      const startX = e.clientX;
      document.onmousemove = function (ie) {
        const endX = ie.clientX;
        moveX.value = endX - startX;
        if (moveX.value + leftTreeWidth.value > 420) {
          leftTreeWidth.value = 420;
          moveX.value = 0;
        } else if (moveX.value + leftTreeWidth.value <= 210) {
          leftTreeWidth.value = 210;
          moveX.value = 0;
        }
      };
      document.onmouseup = function () {
        leftTreeWidth.value += moveX.value;
        leftTreeWidth.value = Math.max(210, Math.min(420, leftTreeWidth.value));
        moveX.value = 0;
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  </script>
</body>

</html>